<template>
  <a-drawer
    :width="910"
    closable
    placement="right"
    :visible="visible"
    @close="visible=false"
    :body-style="{padding:'12px'}"
  >
    <a-spin :spinning="spinning">
      <div style="margin: 10px 0 15px;" class="g-flex ">
        <div class="title">待手术项目：</div>
        <div :span="21" class="g-flex-col">
          <div style="margin-bottom: 5px;" v-for="(item,index) in itemList" :key="item.treatItemId">
            {{ index + 1}}、{{item.operateName}}
          </div>
        </div>
      </div>
      <div class="title" style="margin: 30px 0 10px;">当前使用产品：</div>
      <div slot="title" class="g-flex g-y-center">
        <div style="color: #000000;font-weight: bold;">手术管理</div>
        <div style="font-size: 12px;margin-left: 30px;color: #333333;">姓名：{{row_record.name}}</div>
        <div style="font-size: 12px;margin-left: 20px;color: #333333;">卡号：{{row_record.cardNo}}</div>
        <div style="font-size: 12px;margin-left: 20px;color: #333333;">档案号：{{row_record.cardNo}}</div>
      </div>
<!--      <a-button icon="select" type="primary">选择材料包</a-button>-->
      <a-popover :visible="popoverVisible" @visibleChange="visibleChange" autoAdjustOverflow trigger="click" placement="bottomRight">
        <template slot="title"><span>选择产品</span></template>
        <template slot="content">
          <a-spin :spinning="spinning">
            <div style="width:600px;">
              <div class="table-page-search-wrapper">
                <a-form layout="inline">
                  <a-row :gutter="24">
                    <a-col :span="12">
                      <a-form-item label="拼音码" style="margin-bottom: 0;">
                        <a-input v-decorator="['cardNo']" allow-clear placeholder="请输入" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="产品名称" style="margin-bottom: 0;">
                        <a-input v-decorator="['cardNo']" allow-clear placeholder="请输入" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
              <!--按钮里面的表格-->
                <a-table
                  :pagination="pagination"
                  style="margin-top: 15px;"
                  size="small"
                  :columns="productColumns"
                  :data-source="productTable"
                  :rowKey="(record,index)=> index"
                  @change="handleTableChange"
                  :customRow="clickRow"
                >
              </a-table>
            </div>
          </a-spin>
        </template>
        <a-button icon="plus-circle" type="primary">添加产品</a-button>
      </a-popover>
      <a-button style="margin-left: 20px;" icon="printer" type="primary">打印产品</a-button>
      <a-form :form="form" layout="inline" >
        <a-table
          style="margin-top: 15px;"
          size="small"
          :columns="columns"
          :data-source="tableData"
          :rowKey="(record,index)=> index"
        >
          <!--数量-->
          <template slot="prdtQty" slot-scope="text,record,index">
            <a-form-item>
              <a-input
                type="number"
                v-decorator="[`prdtQty${index}`,{initialValue:text||1,rules: [{validator: validatorQty}]}]"
                @change="e => handleChangePrdtQty(e.target.value, index,'prdtQty')"/>
            </a-form-item>
          </template>
          <!--售价-->
          <template slot="changePrice" slot-scope="text,record,index">
            <a-form-item>
              <a-input
                type="number"
                v-decorator="[`changePrice${index}`,{initialValue:text||0,rules: [{validator: validatorPrice}]}]"
                @change="e => handleChangePrdtQty(e.target.value, index,'changePrice')"/>
            </a-form-item>
          </template>
          <!--总金额-->
          <template slot="changeAmt" slot-scope="text,record">
            <a-form-item>
              <span >{{ chargeAmt(record) }}</span>
<!--              <a-input-->
<!--                v-decorator="[`changeAmt${index}`,{initialValue:text||0,rules: [{validator: validatorAmt}]}]"-->
<!--                @change="e => handleChangePrdtQty(e.target.value, index,'changeAmt')"/>-->
            </a-form-item>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text,record,index">
            <a-button class="g-bt-pad-0" type="link"  @click="onDeleteRow(record,index)">删除</a-button>
          </template>
        </a-table>
      </a-form>
    </a-spin>
    <div :style="drawerFooterStyle">
      <a-button style="marginRight: 8px" @click="visible=false" >
        取消
      </a-button>
      <a-button type="primary" @click="onSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { operateInfo, productList, updateOperateInfo } from '@/api/workstation/doctor'
export default {
  data () {
    return {
      row_record:{},
      tableData:[],
      spinning:false,
      visible:false,
      form: this.$form.createForm(this),
      columns: [
        { title: '序号', customRender: (text,record,index)=>index+1 ,width:60 },
        { title: '产品名称', dataIndex: 'prdtName',width: 120, ellipsis: true },
        { title: '数量', dataIndex: 'prdtQty', width:110, scopedSlots: { customRender: 'prdtQty' },ellipsis: true},
        { title: '单位', dataIndex: 'unit', width: 75,ellipsis: true },
        { title: '单价', dataIndex: 'prdtPrice',width: 100, ellipsis: true },
        { title: '售价', dataIndex: 'changePrice', scopedSlots: { customRender: 'changePrice' }, width: 150, ellipsis: true },
        { title: '总金额', dataIndex: 'changeAmt', scopedSlots: { customRender: 'changeAmt' }, width: 110, ellipsis: true },
        { title: '规格', dataIndex: 'spec', width: 80,ellipsis: true },
        { title: '操作',scopedSlots:{customRender:'action'},width: 80, ellipsis: true },
      ],
      productColumns: [
        { title: '序号', customRender: (text,record,index)=> (this.pagination.current-1)*this.pagination.pageSize+(index+1) ,width:60 },
        { title: '编码', dataIndex: 'code', width: 80, ellipsis: true},
        { title: '拼音码', dataIndex: 'pyCode', width: 80,ellipsis: true },
        { title: '产品名称', dataIndex: 'prdtName',width: 100, ellipsis: true },
        { title: '产品类别', dataIndex: 'tptName',width: 100, ellipsis: true },
        { title: '单位', dataIndex: 'unit', width: 70, ellipsis: true },
        { title: '规格', dataIndex: 'spec', width: 70, ellipsis: true },
        // { title: '备注', dataIndex: 'remark', width: 110,ellipsis: true },
      ],
      drawerFooterStyle: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      },
      pagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '15'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `${total}条 `, //分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1, //第几页
        pageSize: 10, //每页中显示数据的条数
        // searchValue: '',
      },
      drawer_info:{},
      itemList :[],
      popoverVisible:false,
      productTable:[]
    }
  },
  methods: {
    show (record) {
      this.visible = true
      this.row_record=record
      this.drawer_info={}
      this.getInfo()
      this.getProductList()
    },
    getInfo(){
      this.spinning = true
      const params = {
        treatId	: this.row_record.treatId,
        roomId	: this.row_record.roomid,
        operateId: this.row_record.operateId,
      }
      console.log('params',params)
      operateInfo(params).then(res=>{
        this.spinning = false
        console.log('手术信息',res)
        if(res.code==200){
          this.drawer_info = res.data
          this.itemList = res.data.itemList ||[]
          this.tableData = res.data.productList ||[]
        }
      })
    },
    getProductList(){
      this.spinning = true
      productList(this.queryParam).then(res=>{
        this.productTable = res.rows
        this.pagination.total = parseInt(res.total) || 0
        console.log('产品信息',res)
      }).finally(()=>{
        this.spinning = false
      })
    },
    /**
     数量
     * */
    handleChangePrdtQty(value, index, column) {
      this.tableData[index][column] = value
    },
    /**
     成交金额
     * */
    chargeAmt(record) {
      const num = parseInt(record.prdtQty) || 1
      const price = parseFloat(record.changePrice) || 0
      const result = parseFloat(price * num ).toFixed(2)
      return result
    },
    /**
     表单校验-数量
     * */
    validatorQty(rule, value, callback) {
      if (value >= 1) {
        callback()
      }
      callback('必须为正整数')
    },
    /**
     表单校验-售价
     * */
    validatorPrice(rule, value, callback) {
      if (value >= 0) {
        callback()
      }
      callback('必须为正数')
    },
    /**
     表单校验-总金额
     * */
    validatorAmt(rule, value, callback) {
      if (value >= 0) {
        callback()
      }
      callback('必须为正数')
    },
    //删除表格行
    onDeleteRow(record,index){
      console.log('record',record.prdtId)
      const filterData = this.tableData.filter(item=>record.prdtId != item.prdtId)
      console.log('filterData',filterData)
      this.tableData = filterData
    },

    /**
     * 控制显示预存款气泡卡片
     * */
    visibleChange(visible){
      this.popoverVisible=visible
    },
    /**
     分页
     * */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum=pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getProductList()
    },
    /**
     表格行点击事件
     * */
    clickRow(record){
      return {
        on: {
          dblclick:(e)=>{
            console.log('record',record)
            this.tableData.push(record)
          }
        }
      }
    },
    onSubmit(){
      const treatProductParamList = this.tableData.map(item => {
          return {
            prdtPrice : item.prdtPrice,
            changePrice : item.changePrice || 0,
            chargeAmt : this.chargeAmt(item) || 0,
            id : item.id,
            treatId : item.treatId,
            prdtId  : item.prdtId,
            prdtName : item.prdtName,
            prdtQty : item.prdtQty,
            unit :item.unit,
            spec :item.spec,
            prdtTypeId : item.prdtTypeId,
            prdtType : item.prdtType,
          }
      })
      // console.log('原数组111',this.tableData)
      // console.log('新数组222',treatProductParamList)
      const params = {
        treatProductParamList:treatProductParamList,
        treatId: this.row_record.treatId
      }
      updateOperateInfo(params).then(res=>{
        console.log('手术管理-提交',res)
        if(res.code==200){
          this.$message.success( res.message)
          this.getInfo()
          this.getProductList()
        }else{
          this.$message.info(res.message)
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
.title{
  font-size:16px;
  color: #333333;
  font-weight: bold;
}
/deep/ .ant-form-item{
  margin-bottom: 0 ;
}
</style>

